<template>
  <div class="vehicle-search">
    <!-- 标题 -->
    <wallet-title :title="searchTitle" />
    <!-- 车辆列表 -->
    <div>
      <van-list>
        <!-- <van-cell v-for="item in vehicleList" :key="item" :title="item" /> -->
        <div class="lis" ref="lis" v-for="(item,index) in vehicleList" :key="index" :class="{rentaled: item.rentalStatus === '0'}">
          <div class="lis-left">
            <img :src="item.imgSrc" alt="">
          </div>
          <div class="lis-center">
            <div class="brand">
              <span>{{item.name}}</span>
              <span>{{item.licenseNum}}</span>
            </div>
            <div class="price">{{item.rentalPrice}}</div>
            <div class="capacity">
              <span>{{item.gearType}}</span>
              <span>{{item.seatsNum}}</span>
              <span>{{item.engineModel}}</span>
            </div>
          </div>
          <div class="lis-right">
            <van-icon name="arrow" ref="arrow" @click="getListNum(item)" />
          </div>
        </div>
      </van-list>
      <van-popup class="popup" v-model="showPop" position="right" closeable>
        <vehicle-rental ref="vehicleRental" :rentalData="rentalData" />
      </van-popup>
    </div>
  </div>
</template>
<script>
import WalletTitle from '../../common/WalletTitle.vue'
import VehicleRental from './VehicleRental.vue'
import { getCarList, getOrderList, getTimePackageList, getRentalCar, getUserList } from '../../../api';
import { mapState } from 'vuex';
export default {
  components: { WalletTitle, VehicleRental },
  props: {
    routeData: Object
  },
  name: 'vehicleSearch',
  data() {
    return {
      searchTitle: '立即用车',
      rentalData: null,
      vehicleList: [
        {
          id: 0,
          name: '大众',
          cardType: '京牌',
          appearance: '白色',
          gearType: '自动',
          licenseNum: '桂AB1234',
          seatsNum: '5',
          engineModel: '1.5',
          dialyPrice: '456',
          rentalPrice: '0.1',
          compancy: '神州租车',
          imgSrc: 'https://img.yzcdn.cn/vant/cat.jpeg'
        }
      ],
      showPop: false,
      rentalPrice: 0,
      showCar: false // 车辆被租用的弹框
    }
  },
  mounted() {
    setTimeout(() => {
      this.getCarListFun();
    }, 100);
    this.$store.stateRouteData = this.routeData;
    this.$store.commit('setRoutData', this.rentalData);
  },
  computed: {
    ...mapState(['stateOrderStatus'])
  },
  methods: {
    getCarListFun() { // 获取车辆列表方法
      let that = this;
      getCarList().then(res => {
        // console.log(res.data.data)
        // console.log('获取车辆列表数据',res);
        let data = res.data.data;
        let lng = parseFloat(that.routeData.lnglat[0]).toFixed(2);
        let lat = parseFloat(that.routeData.lnglat[1]).toFixed(2);
        data.forEach(item => {
          let itemLng = item.longitude.toFixed(2);
          let itemLat = item.latitude.toFixed(2);
          // 比较经纬度
          if(lng === itemLng && lat === itemLat) {
            that.vehicleList.push(item); // 将数据添加到数组中
          }
        });
      }).catch(err => {
        console.log(err);
      })
      that.vehicleList.shift(); // 删除数组的第一个元素
      getRentalCar().then(res => { // 获取不可租车辆
        this.showCar = true;
      })
    },
    // 点击车辆后的方法
    getListNum(e) {
      if (e.rentalStatus === '0') { // 如果车辆不可租将取消点击事件
        return ;
      }
      getUserList({
        "username": this.$cookie.get('username')
      }).then(({data}) => {
        console.log('找到用户的余额', data.data[0].deposit)
        if(data.data[0].deposit === 0 || data.data[0].deposit === null || data.data[0].deposit === "") {
          this.$dialog.alert({
            message: "请先交定金再租车"
          })
        }else {
          console.log('可以租车')
          getOrderList( // 找到是否有订单再进入相应页面
            this.$cookie.get('userId'),
            0
          ).then(res => { // 获取当前正在进行的订单
            if(res.data.data.length !== 0) { // 如果有订单则不弹出套餐弹框
              this.showPop = false; // 让时间套餐弹框隐藏
              this.$dialog.confirm({ // 弹框确认是否进入订单页面
                message: '是否进入订单界面？'
              })
                .then(() => {
                  getTimePackageList(e.rentalPrice).then(res => { // 获取当前车辆单价对应的时间套餐
                    this.packageList = res.data.data; // 赋值给套餐列表
                  }).catch(err => {
                    console.log(err);
                  })
                  this.$router.push('/rental'); // 选择了套餐点击立即租用之后进入订单页面
                })
                .catch(() => {
                  // on cancel
                });
            }else { // 如果没有订单
              this.showPop = true; // 让时间套餐弹框显示
              this.rentalData = e; // 将当前点击的车辆信息传递给子组件
              this.$nextTick(() => { // 调用子组件的方法，也就是进入时间套餐后让时间套餐列表渲染出来
                this.$refs.vehicleRental.init(this.rentalData.rentalPrice);
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.vehicle-search {
  width: 100%;
  height: 100%;
  .van-list {
    width: 100%;
    height: 100%;
    .lis {
      width: 100%;
      height: $height*2.5;
      display: flex;
      flex-flow: row wrap;
      border-bottom: 4px solid $bgcolor;
      &:first-of-type {
        border-top: 4px solid $bgcolor;
        height: $height*2.5+4;
      }
      // 图片
      .lis-left {
        width: 30%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
        }
      }
      // 车辆介绍
      .lis-center {
        width: 60%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        div {
          font-size: 14px;
        }
        .brand {
          display: flex;
          flex-flow: row wrap;
          align-items: center;
          span {
            &:nth-of-type(1) {
              font-weight: 700;
            }
            &:nth-of-type(2) {
              margin-left: 6px;
              background-color: $color;
              color: #fff;
              font-size: 12px;
              border-radius: 2px;
              padding: 4px;
            }
          }
        }
        .price {
          font-weight: 600;
          margin: 4px 0;
          &::before {
            content: '￥';
          }
          &::after {
            content: '/分钟';
            font-weight: 400;
          }
        }
        .capacity {
          display: flex;
          flex-flow: row wrap;
          font-size: 12px;
          span {
            border: 1px solid #888;
            padding: 0 2px;
            margin: 0 4px;
            border-radius: 4px;
            &:nth-of-type(2) {
              &::after {
                content: '座';
              }
            }
            &:nth-of-type(3) {
              &::after {
                content: 'L';
              }
            }
          }
        }
      }
      .lis-right {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #888;
      }

      // 弹框
      .popup /deep/ {
        width: 100%;
        // height: 100%;
        .van-icon {
          font-weight: 700;
          color: #fff;
          border: 1px solid #eee;
          border-radius: 4px;
          padding: 4px;
          background-color: $color;
          margin-top: -10px;
        }
      }
    }
  }
}
.rentaled {
  color: #ccc;
}
</style>